<template>
  <div class="category">
    <div style="padding: 10px;background: #f8f8f9">
      <Row class-name="home-page-row" :gutter="10">
        <Col :xs="24" :md="12" :sm="24" :lg="8" :style="{marginBottom: '10px'}">
            <Card title="一级分类" icon="ios-options" :padding="0" shadow >
              <div class="options"  slot="extra" >
                  <span class="edit" v-if="!is_edit" @click.prevent="changeEdit">编辑</span>
              </div >
              <ul class="cellgroup">
                <li :class="active == index ?'activeCell':'cell'" @click="handleChangeOne(index)"  v-for="(item,index) in categoryList" :key="index">
                  <div>{{item.category_name}}</div>
                  <Icon  v-if="!is_edit" type="ios-arrow-forward" slot="extra"  />
                  <div v-else slot="extra">
                    <Button style="margin:0 3px" type="warning">修改</Button>
                    <Button style="margin:0 3px" type="error">删除</Button>
                  </div>
                </li>
                <div class="error" v-if="categoryList == 0" >
                   <img style="width:150px" src="@/assets/images/error.png"/>
                </div>
                <div class="handleAdd" @click="handleAdd">
                   <Button type="primary" shape="circle" icon="md-add">新增</Button>
                </div>
              </ul>
            </Card>
        </Col>
        <Col :xs="24" :md="12" :sm="24" :lg="8" :style="{marginBottom: '10px'}" v-if="active != -1">
            <Card :title="categoryList[active].category_name"  :padding="0" shadow >
              <div class="options"  slot="extra" >
                  <span class="edit" v-if="!is_edit" @click.prevent="changeEdit">编辑</span>
              </div >
              <ul class="cellgroup">
                <li :class="activeKey == index ?'activeCell':'cell'" @click="handleChangeTwe(index)"  v-for="(item,index) in categoryList[active].children" :key="index">
                  <div>{{item.category_name}}</div>
                  <Icon  v-if="!is_edit" type="ios-arrow-forward" slot="extra"  />
                  <div v-else slot="extra">
                    <Button style="margin:0 3px" type="warning">修改</Button>
                    <Button style="margin:0 3px" type="error">删除</Button>
                  </div>
                </li>
                <div class="error" v-if="categoryList[active].children.length == 0" >
                   <img style="width:150px" src="@/assets/images/error.png"/>
                </div>
                <div class="handleAdd" @click="handleAdd">
                   <Button type="primary" shape="circle" icon="md-add">新增</Button>
                </div>
              </ul>
            </Card>
        </Col>
        <Col :xs="24" :md="12" :sm="24" :lg="8" :style="{marginBottom: '10px'}" v-if="activeKey != -1">
            <Card :title="categoryList[active].children[activeKey].category_name"  :padding="0" shadow >
              <div class="options"  slot="extra" >
                  <span class="edit" v-if="!is_edit" @click.prevent="changeEdit">编辑</span>
              </div >
              <ul class="cellgroup">
                <li class="cell"  v-for="(item,index) in categoryList[active].children[activeKey].children" :key="index">
                  <div>{{item.category_name}}</div>
                  <div v-if="is_edit" slot="extra">
                    <Button style="margin:0 3px" type="warning">修改</Button>
                    <Button style="margin:0 3px" type="error">删除</Button>
                  </div>
                </li>
                <div class="error" v-if="categoryList[active].children[activeKey].children.length == 0" >
                   <img style="width:150px" src="@/assets/images/error.png"/>
                </div>
                <div class="handleAdd" @click="handleAdd">
                   <Button type="primary" shape="circle" icon="md-add">新增</Button>
                </div>
              </ul>
            </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
   data() {
    return {
      active:-1,
      activeKey:-1,
      is_edit:false,
      page:1,
      categoryList:[]
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    changeEdit(){
      this.is_edit = true
    },
    handleChangeOne(index){
      this.active = index
    },
    handleChangeTwe(index){
      this.activeKey = index
    },
    handleAdd(){

    },
    getDatas(){
      let params = {

      }
      this.$api.getChildCategory(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.categoryList = res.data
          }
      })
    },
    edit(index){
      this.$router.push({
        path:'/goods/edit/' + this.tableData.data[index].goods_id
      })
    },
    deletes(index){
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除该商品分类吗?',
        onOk: () => {
          let params = {
            rotation_chart_id : this.tableData.data[index].rotation_chart_id
          }
          this.$api.deletesCategory(params).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success('删除成功');
              this.getDatas();
            }
          })
        }
      })
    },
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
